<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="600" height="450"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // Set a white background
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // --- Draw Interfaces ---
    const y1 = 150;
    const y2 = 300;
    
    function drawInterface(y) {
        // Black line
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(0, y);
        ctx.lineTo(canvas.width, y);
        ctx.stroke();

        // Grey shadow line below
        ctx.strokeStyle = 'rgb(211, 211, 211)';
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(0, y + 2);
        ctx.lineTo(canvas.width, y + 2);
        ctx.stroke();
    }
    
    drawInterface(y1);
    drawInterface(y2);
    
    // --- Draw Labels ---
    ctx.fillStyle = 'black';
    ctx.font = "bold 48px 'Times New Roman', serif";
    ctx.textAlign = 'left';
    ctx.fillText('Medium 1', 20, 90);
    ctx.fillText('Medium 2', 20, 240);
    ctx.fillText('Medium 3', 20, 390);

    // --- Draw Ray ---
    // Define the points for the ray path to show the correct refraction
    // The angles are chosen such that n2 > n1 > n3
    const p0 = { x: 200, y: 50 };
    const p1 = { x: 300, y: 150 };
    const p2 = { x: 375, y: 300 };
    const p3 = { x: 548, y: 400 };

    // Create a path object for the ray
    const rayPath = new Path2D();
    rayPath.moveTo(p0.x, p0.y);
    rayPath.lineTo(p1.x, p1.y);
    rayPath.lineTo(p2.x, p2.y);
    rayPath.lineTo(p3.x, p3.y);

    // Draw the shadow of the ray (thicker, grey)
    ctx.strokeStyle = 'rgb(180, 180, 180)';
    ctx.lineWidth = 6;
    ctx.lineCap = 'butt';
    ctx.lineJoin = 'miter';
    ctx.stroke(rayPath);

    // Draw the main ray (thinner, black) on top of the shadow
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 3;
    ctx.stroke(rayPath);
    
    // --- Draw Arrowhead ---
    // The arrowhead points from p2 to p3
    const from = p2;
    const to = p3;
    const angle = Math.atan2(to.y - from.y, to.x - from.x);
    // Use a slightly wider angle for a fatter arrowhead like in the image
    const arrowAngle = Math.PI / 8; 

    // Helper function to draw a filled arrowhead
    function drawArrowhead(size, color) {
        const arrowP1x = to.x - size * Math.cos(angle - arrowAngle);
        const arrowP1y = to.y - size * Math.sin(angle - arrowAngle);
        const arrowP2x = to.x - size * Math.cos(angle + arrowAngle);
        const arrowP2y = to.y - size * Math.sin(angle + arrowAngle);
        
        ctx.fillStyle = color;
        ctx.beginPath();
        ctx.moveTo(to.x, to.y);
        ctx.lineTo(arrowP1x, arrowP1y);
        ctx.lineTo(arrowP2x, arrowP2y);
        ctx.closePath();
        ctx.fill();
    }
    
    // Draw a larger grey arrowhead for the shadow effect
    drawArrowhead(23, 'rgb(180, 180, 180)');
    
    // Draw a smaller black arrowhead on top
    drawArrowhead(20, 'black');

</script>
</body>
</html>